﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - Sketch2Code - Transform sketches into HTML markup automagically!</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!--link href="/Content/octicons.css" rel="stylesheet" type="text/css" /-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800">
    <script src="/Scripts/modernizr-2.6.2.js"></script>
    <link href="/Content/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="header" class="container-fluid">
        <div class="row">
            <div class="col">
                <img alt="Microsoft Logo" src="/content/img/logo_MS.png">
            </div>

            <div class="col text-right">
                <a target="_blank" href="https://www.ailab.microsoft.com/">
                    AI Lab
                </a>
            </div>
        </div>
    </div>

    <div class="container-fluid hidden-responsive">
        <div id="steps" class="row justify-content-center">
            <div class="col">
                <span class="dot active">1</span>
                <span class="header-txt active">UPLOAD DESIGN</span>
            </div>

            <div class="col">
                <span class="dot">2</span>
                <span class="header-txt">SKETCH2CODE IS AT WORK!</span>
            </div>

            <div class="col">

                <span class="dot">3</span>

                <span class="header-txt">DOWNLOAD YOUR HTML</span>
            </div>
        </div>
    </div>

    <div id="content">
        <div id="title">
            <h1>
                <span class="main">Sketch</span>
                <span class="number">2</span>
                <span class="main">Code</span>
            </h1>

            <h2 class="subtitle">Transform any hands-drawn design into a HTML code with AI.</h2>
            <h3 class="subtitle2">We're ready!</h3>
        </div>

        <div id="actions" class="container-fluid">
            <div class="row justify-content-center pb-4">
                <div class="d-flex justify-content-center" id="main_02_imgCircle"><img alt="Your sketch" class="let_magic" src="/content/img/step2_leftCircle.png"></div>
            </div>
            <div class="row">

                <form class="center-hz" enctype="multipart/form-data" method="post" action="@Url.RouteUrl(" work-in-progress")">
                    <label for="submitForm">
                        <img alt="Let the magic begin" src="/content/img/button_letMagic.svg" width="250px">
                        <input id="submitForm" class="custom-file-input" type="submit">
                        <input id="imageData" name="imageData" type="hidden" value="@Model.ImageData" />
                    </label>
                </form>
            </div>
            <div class="row justify-content-center pt-4">
                <a href="/" id="main_02_startOver"><span style="text-decoration: underline;">OR START OVER</span></a>
            </div>


        </div>


    </div>

    <div class="content-footer">

        <div class="container-fluid">

            <div class="row hidden-responsive">

                <div class="col">
                    <img alt="Microsoft Logo" class="img-fluid float-left d-flex flex-column justify-content-end center-logo-left" src="/content/img/logo_MS.png">
                </div>
                <div class="col">
                    <img alt="Logo web" class="img-fluid float-right center-logo-right" src="/content/img/img_spareMobile.svg">
                </div>
            </div>

            <div class="row justify-content-center hidden-md">
                <img alt="Microsoft Logo" class="img-fluid float-left d-flex flex-column justify-content-end" src="/content/img/logo_MS.png">
            </div>

        </div>
        <div id="footer" class="p-3 p-md-3">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="text-center text-white pb-4">
                        Your picture may be used to improve the underlying AI.
                    </div>
                </div>
                <div class="row footer-links2">
                    <div class="col"><a target="_blank" href="https://www.ailab.microsoft.com/">AI Lab</a></div>
                    <div class="col"><a target="_blank" href="https://support.microsoft.com/en-us/contactus">Contact Us</a></div>
                    <div class="col"><a target="_blank" href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacy &amp; Cookies</a></div>
                    <div class="col"><a target="_blank" href="https://go.microsoft.com/fwlink/?LinkID=206977">Terms of use</a></div>
                    <div class="col"><a target="_blank" href="https://www.microsoft.com/trademarks">Trademarks</a></div>
                </div>
            </div>
            <div class="text-center text-white pt-5">
                © Microsoft 2018
            </div>
        </div>
    </div>

    <script src="/Scripts/jquery-3.0.0.js"></script>
    <script src="/Scripts/bootstrap.js"></script>

</body>
</html>